<template>
	<view class="party-container">
		<u-swiper :list="list" indicator indicatorMode="dot" height="400rpx" keyName="image" showTitle></u-swiper>
		<!-- 按钮 -->
		<view class="but">
			<view class="but-item" v-for="(item,index) in butList" :key="index" @click="butChange(item.path)">
				<view class="icon">
					<image :style="{'backgroundColor':item.color}" :src="item.icon" mode=""></image>
				</view>
				<view class="title">
					{{ item.title }}
				</view>
			</view>
		</view>
		<!-- 新闻 -->
		<uni-card class="newsCard" v-for="(item,index) in newsList" :key="index" @click="goNewDetails(item)">
			<view class="Message">
				<view class="Message-title">
					{{item.newsTitle}}
				</view>
				<view class="Message-desc">
					<view class="reviewNum">
						{{item.reviewNum}}观看
					</view>
					<view class="time">
						{{item.addTime}}
					</view>
				</view>
			</view>
			<view class="newsCard-image">
				<image :src="item.image" mode=""></image>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import {
		getNewsList
	} from '@/api/news/index.js'
	export default {
		data() {
			return {
				params:{
					pageNum:1,
					pageSize:10
				},
				newsList: [],
				list: [{
					image: '/static/partyBuilding/1.jpg',
					title: '在主持十九届中共中央政治局第一次集体学习是发表讲话'
				}, {
					image: '/static/partyBuilding/2.jpg',
					title: '习近平会见马九英一行'
				}, {
					image: '/static/partyBuilding/3.jpg',
					title: '岚县种好小土豆收获振兴乡村大金豆'
				}, ],
				butList: [{
					title: '党建要闻',
					icon: '/static/partyBuilding/but/1.png',
					color: '#e3b3b3',
					path: '/pages/partyBuilding/news/index'
				}, {
					title: '党费缴纳',
					icon: '/static/partyBuilding/but/2.png',
					color: '#c2ffc6',
					path: '/pages/partyBuilding/partyMembershipDues/index'
				}, {
					title: '线上投票',
					icon: '/static/partyBuilding/but/3.png',
					color: '#b2d6ec',
					path: '/pages/partyBuilding/vote/index'
				}, ],
			}
		},
		onShow() {
			this.getlist()
		},
		methods: {
			async getlist() {
				const result = await getNewsList(this.params)
				const data = result.data.result.list
				this.newsList = data

			},
			// 按钮
			butChange(path) {
				uni.navigateTo({
					url: path
				})
			},
			goNewDetails(item) {
				uni.navigateTo({
					url: `/pages/partyBuilding/news/details?details=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.party-container {

		// 主要按钮
		.but {
			margin: 20rpx 0;
			display: flex;
			justify-content: space-evenly;

			.but-item {
				// background-color: red;
				padding: 10rpx 25rpx;
				border-radius: 30rpx;

				.icon {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 10rpx;

					image {
						width: 50rpx;
						height: 50rpx;
						padding: 20rpx;
						// border: 2rpx solid red;
						border-radius: 30rpx;
						;
						// background: red;
					}

				}
			}
		}

		// 新闻
		::v-deep.newsCard {
			.uni-card__content {
				display: flex;
				justify-content: space-between;

				.newsCard-image {
					image {
						height: 150rpx;
						width: 250rpx;
						border-radius: 10rpx;
					}
				}

				.Message {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.Message-title {
						font-weight: 600;
						color: black;
						font-size: $uni-font-size-base ;
						overflow: hidden;
					}

					.Message-desc {
						display: flex;
						justify-content: space-between;

						>view {
							padding-right: 20rpx;
						}
					}
				}
			}
		}
	}
</style>